<!--
 * @Author: DT1604\ZPL zhoupeili@dpc.com.cn
 * @Date: 2022-05-16 14:40:23
 * @LastEditors: DT1604\ZPL zhoupeili@dpc.com.cn
 * @LastEditTime: 2022-08-30 10:33:46
 * @FilePath: \operation-platform-ui\src\views\businessSystem\chargingInformation\power.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <section class="Block">
    <div v-if="electricData.length > 0"  style="width: 100%; height: 100%">
      <div id="main" style="width: 100%; height: 100%"></div>
    </div>
    <div class="nodata" v-else>
      <img src="~@/assets/image/empty.png" alt="" />
      <p>暂无数据</p>
    </div>
  </section>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: {
    electricData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  watch: {
    electricData: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.drawLine('main');
        });
      },
      immediate: true,
    },
  },
  mounted() {},

  methods: {
    drawLine(id) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option = {
        color: ['#1890ff'],
        title: {
          show: true,
          text: '电量',
          x: 'center',
          padding: 10,
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 15,
            fontWeight: 'normal',
          },
        },
        dataZoom: [
          {
            // 控制图表左右滑动
            width: '15',
            type: 'slider',
            show: false, //flase直接隐藏图形
            xAxisIndex: [0],
            left: 33, //滚动条靠左侧的百分比
            bottom: 40,
            height: 20, //组件高度
            start: 0, //滚动条的起始位置
            showDataShadow: false, //是否显示数据阴影
            showDetail: false, //是否显示想洗数值信息
            end: 50, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
          },
          {
            textStyle: {
              color: '#5475c8',
            },
            dataBackground: {
              areaStyle: {
                opacity: 0.9,
                color: '#ff3131',
                width: 0.5,
              },
              lineStyle: {
                opacity: 0.9,
                color: '#ff3131',
                width: 0.5,
              },
            },
            type: 'slider',
            show: true,
            height: '3.5%',
            bottom: '12ph',
            borderColor: '#8FDFFE',
            backgroundColor: 'rgba(183,233,252,0.6)',
            handleIcon:
              'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
            handleColor: '#8FDFFE',
            handleSize: 15,
            start: 0,
            end: 50,
            brushSelect: true,
          },

          {
            type: 'inside',
            show: true,
            xAxisIndex: [0],
            start: 0, //滚动条的起始位置
            end: 0.25, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            name: '时间',
            data: this.electricData.map((item) => {
              return item.date;
            }),
            axisTick: {
              show: false, //隐藏x坐标轴刻度
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#8B8B8B',
                fontSize: '12',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#8B8B8B',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: 'kW·h',
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false, //隐藏x坐标轴刻度
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#8B8B8B',
                fontSize: '12',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#8B8B8B',
              },
            },
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '15',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(239, 243, 247, 1)',
            },
            data: this.electricData.map((item) => {
              return item.quantity;
            }),
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.Block {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.nodata {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>